import React, { useCallback, useEffect, useState } from 'react';
import { Input, Select, Form } from 'antd';
import { FILTER_DATE_TYPE } from 'src/pages/AnalyseManage/EditReport/components/EditorDataType/EnumConfig';
import 'src/pages/AnalyseManage/EditReport/index.module.scss';

const { Option } = Select;

interface IProps {
	field: any;
	setDimensionDate: Function;
}

const FilterFieldDate = ( props: IProps ) => {

	const { field, setDimensionDate } = props;

	const [ way, setWay ] = useState( FILTER_DATE_TYPE[ 0 ].value );
	const [ from, setFrom ] = useState( '' );
	const [ to, setTo ] = useState( '' );

	const handleSelect = ( value ) => {
		setWay( value );
	};

	const handleFrom = ( event ) => {
		setFrom( event.target.value );
	};

	const handleTo = ( event ) => {
		setTo( event.target.value );
	};

	const setCondition = useCallback( () => {
		const conditions = [
			{
				formatType: way,
				id: [ field.dataIndex ],
				quota: 'WD',
				symbol: 'GTE',
				value: [ from ]
			},
			{
				formatType: way,
				id: [ field.dataIndex ],
				quota: 'WD',
				symbol: 'LTE',
				value: [ to ]
			}
		];

		setDimensionDate( conditions );
	}, [ way, field, from, to, setDimensionDate ] );

	useEffect( () => {
		setCondition();
	}, [ setCondition ] );
	return (
		<Form className='filter_field_modal_date' labelCol={ { span: 6 } } labelAlign='left'>
			<Form.Item label="数据聚合方式" name="dateType" colon={ false }>
				<Select defaultValue={ FILTER_DATE_TYPE[ 0 ].value } value={ way } onChange={ handleSelect }>
					{
						FILTER_DATE_TYPE.map( ( v, i ) => {
							return <Option key={ i } value={ v.value }>{ v.label }</Option>;
						} )
					}
				</Select>
			</Form.Item>

			<Form.Item label="从" name="form" colon={ false }>
				<Input type='text' value={ from } onChange={ handleFrom } placeholder='请输入内容'></Input>
			</Form.Item>

			<Form.Item label="到" name="to" colon={ false }>
				<Input type='text' value={ to } onChange={ handleTo } placeholder='请输入内容'></Input>
			</Form.Item>

		</Form>
	);
};

export default React.memo( FilterFieldDate );
